/**
 * Created by Administrator on 2017/3/3.
 */
var windowH = $(window).height();
$('#result').height('css',windowH);

var startimg,startdiv;//获取开始时的图片与div对象
var fgstartX,fgstartY;//获取手指开始时的位置
var fgmoveX,fgmoveY;//移动时的手指位置
var imgstartH;
var startdivW,startdivH;

//开始touch事件
$('.sildimg').on('touchstart',function (e) {
    e.preventDefault();//阻止屏幕滚动
    var touch=e.originalEvent.targetTouches[0];//获取当前触摸点的列表
    fgstartX = touch.pageX;
    fgstartY = touch.pageY;
    startimg = $(this);
    startdivW = startimg.parent().width();
    startdivH = startimg.parent().height();
    imgstartH = startimg.height();
    $(this).css('z-index',130);
});

//手指移动事件
$('.sildimg').on('touchmove',function (e) {
    e.preventDefault();//阻止屏幕滚动
    var touch=e.originalEvent.targetTouches[0];//获取当前触摸点的列表
    fgmoveX = touch.pageX;
    fgmoveY = touch.pageY;
    $(this).css('left',fgmoveX-fgstartX);
    var W=$(this).parent().parent().width()/2;//获取当前元素爷爷级的宽度一半
    if((fgmoveX-fgstartX)>0 && Math.abs((fgmoveX-fgstartX))>=W){
        $(this).css('left',W);
    }else
    if((fgmoveX-fgstartX)<0 && Math.abs((fgmoveX-fgstartX))>=W){
        $(this).css('left',-W);
    }
});

//手指移开事件
$('.sildimg').on('touchend',function (e) {
    e.preventDefault();//阻止屏幕滚动
    var chazhi = fgmoveX - fgstartX;

    var endimgleft = $('#slidbox2').children('.sildimg');
    var endimg1L = endimgleft.offset().left;
    var endimg1T = endimgleft.offset().top;
    var endimg1H = endimgleft.height();

    var endimgright = $('#slidbox3').children('.sildimg');
    var endimg2L = endimgright.offset().left;
    var endimg2T = endimgright.offset().top;
    var endimg2H = endimgright.height();

    var img1 = startimg.clone(true);
    var img2 =  endimgleft.clone(true);
    var img3 = endimgright.clone(true);
    //第一张图片的各个动画参数
    var box2L = $('#slidbox2').offset().left;
    var box2T = $('#slidbox2').offset().top;
    var box2H = $('#slidbox2').height();

    var box3L = $('#slidbox3').offset().left;
    var box3T = $('#slidbox3').offset().top;
    var box3H = $('#slidbox3').height();

    var nowL = startimg.offset().left;
    var nowT = startimg.offset().top;

    var chazhiL1 = (nowL - box2L)/10;
    var chazhiT1 = (nowT - box2T)/10;
    var chazhiH1 = (imgstartH - box2H)/10;

    var chazhiL4 = (nowL - box3L)/10;
    var chazhiT4 = (nowT - box3T)/10;
    var chazhiH2 = (imgstartH - box3H)/10;
    // 第二张图片的参数动画
    var box1L = $('#slidbox1').offset().left;
    var box1T = $('#slidbox1').offset().top;
    var box1H = $('#slidbox1').height();
    var chazhiL2 = (box2L - box1L)/10;
    var chazhiT2 = (box2T - box1T)/10;
    var cahzhiH2 = (box2H - box1H)/10;

    var chazhiL3 = (box3L - box1L)/10;
    var chazhiT3 = (box3T - box1T)/10;
    var cahzhiH3 = (box3H - box1H)/10;
    var j =0;
    if(chazhi<0 && Math.abs(chazhi) >=50){
        //判断是指向左滑动并滑动距离大于50

        function move() {
            //第一张图片的赋值运算
            nowL = nowL -chazhiL1;
            nowT = nowT - chazhiT1;
            imgstartH = imgstartH - chazhiH1;
            startimg.offset({left:nowL,top:nowT});
            startimg.css({'height':imgstartH,'z-index':'0','width':startdivW});
            //第二张图片的赋值运算
            endimg1L = endimg1L - chazhiL2;
            endimg1T = endimg1T - chazhiT2;
            endimg1H = endimg1H - cahzhiH2;
            endimgleft.offset({left:endimg1L,top:endimg1T});
            endimgleft.css({'height':endimg1H,'width':'100%'});
            endimgleft.parent().css('z-index',130);
            if(j==10){
                clearInterval(time);
                j = 0;
                $('#slidbox2').css('z-index',0);
                startimg.remove();
                $('#slidbox1').prepend(img2);
                $('#slidbox1').css('z-index','100');
                endimgleft.remove();
                $('#slidbox2').prepend(img1);
                img1.offset({top:nowT,left:nowL});
                $('#zhezhao2').hide();
            }
        }
        time = setInterval(function(){//循环函数
            j++;
            move();
        },20);

    }else
    if(chazhi>0 && Math.abs(chazhi) >=50){
        //判断是指向右滑动并滑动距离大于50
        function move() {
            //第一张图片的赋值运算
            nowL = nowL - chazhiL4;
            nowT = nowT - chazhiT4;
            imgstartH = imgstartH - chazhiH2;
            startimg.offset({left:nowL,top:nowT});
            startimg.css({'height':imgstartH,'z-index':'0','width':startdivW});
            //第二张图片的赋值运算
            endimg2L = endimg2L - chazhiL3;
            endimg2T = endimg2T - chazhiT3;
            endimg2H = endimg2H - cahzhiH3;
            endimgright.offset({left:endimg2L,top:endimg2T});
            endimgright.css({'height':endimg2H,'width':'100%'});
            endimgright.parent().css('z-index',130);
            if(j==10){
                clearInterval(time);
                j = 0;
                $('#slidbox3').css('z-index',0);
                startimg.remove();
                $('#slidbox1').prepend(img3);
                $('#slidbox1').css('z-index','100');
                endimgright.remove();
                $('#slidbox3').prepend(img1);
                img1.offset({top:nowT,left:nowL});
                $('#zhezhao2').hide();
            }
        }
        time = setInterval(function(){//循环函数
            j++;
            move();
        },20);
    }else{
        // 否则回到原位
        $(this).animate({left:'0'},300);
        $(this).css('z-index','100');
        $('#zhezhao2').hide();
    }
});